<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>${vote.title} - ${site.seoTitle} - Powered by JPROCMS</title>
    <meta name="keywords" content="${site.seoKey}" />
    <meta name="description" content="${site.seoDesc}" />
    [#include '../includes/common_res.html'/]
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="bg-gray-200">
      <div class="container">
        <nav class="row" aria-label="breadcrumb">
          <ol class="col list-inline my-2">
            <li class="list-inline-item"><a href="${site.url}">首页</a></li>
            <li class="list-inline-item">/</li>
            <li class="list-inline-item"><a href="${base}/vote">投票</a></li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="container mt-4">
      <h3>${vote.title}</h3>
      <div class="mt-2 pb-2 border-bottom text-muted">
        <div>
          <span>${ZFormat(vote.createTime, 'yyyy-MM-dd HH:mm')}</span>
          [#if vote.status == 0]
          <span class="ml-2 badge badge-success">进行中</span>
          [#elseif vote.status == 1]
          <span class="ml-2 badge badge-secondary">未启用</span>
          [#elseif vote.status == 2]
          <span class="ml-2 badge badge-warning">未开始</span>
          [#elseif vote.status == 3]
          <span class="ml-2 badge badge-info">已结束</span>
          [#else]
          <span class="ml-2 badge badge-danger">未知状态</span>
          [/#if]
          <i class="ml-2 fas fa-vote-yea text-primary" title="参与人次"></i>
          <span>${vote.voteNum}</span>
        </div>
        [#if vote.description??]
        <div class="mt-2 small">${vote.description}</div>
        [/#if]
      </div>
      <form id="voteForm" action="${api}/vote/vote" method="post">
        <div class="mt-3 small check-group">
          [#list vote.items as item]
          <div class="form-check mt-2 text-muted">
            <input
              class="form-check-input"
              type="${vote.voteMultiple?string('checkbox','radio')}"
              name="items"
              id="vote-${vote.id?c}-${item_index?c}"
              value="${item.id?c}"
              required
            />
            <label
              class="form-check-label"
              for="vote-${vote.id?c}-${item_index?c}"
            >
              ${item.title}
            </label>
          </div>
          [/#list]
        </div>
        <input type="hidden" name="id" value="${vote.id?c}" />
        <div class="mt-4 text-center">
          <button type="submit" class="btn btn-primary btn-sm">投票</button>
          <a
            href="${base}/vote/${vote.id?c}/result"
            class="ml-2 btn btn-outline-danger btn-sm"
            >查看</a
          >
        </div>
      </form>

      <script>
        $("#voteForm").validate({
          submitHandler: function (form) {
            event.preventDefault();
            const formData = $(form).serializeJSON();
            const token = sessionStorage.getItem("accessToken");
            axios
              .post(form.action, formData, {
                headers: {
                  "Tenant-Id": Cms.getTenantId(),
                  Authorization: "Bearer " + token,
                },
              })
              .then(function (response) {
                if (response.data.code === 0) {
                  alertShow("投票成功！");
                  $("#voteForm")[0].reset();
                } else {
                  alertShow(response.data.msg);
                  $("#voteForm")[0].reset();
                }
              });
          },
        });
      </script>
    </div>
    [#include '../includes/footer.html'/] [#include '../includes/inc_msg.html'/]
  </body>
</html>
[/#escape]
